<template>
  <Dialog
    :visible.sync="propVisible"
    :show-header="showHeader"
    @close="onClose"
    :title="title"
  >
    <div class="u-pt30 u-pb30 u-pl20 u-pr20">
      <Alert
        :icon="icon"
        v-if="content"
        text-align="left"
      >{{content}}</Alert>
      <Tip
        style="padding-left: 34px; line-height: 24px; font-size: 13px;"
        class="u-pt10"
        v-if="tip"
        v-html="tip"
      ></Tip>
      <slot></slot>
    </div>
    <el-row
      type="flex"
      justify="end"
      class="u-pb20 u-pr20"
    >
      <el-button
        v-for="(item, index) in buttons"
        size="small"
        @click="onConfirm(index)"
        :key="index"
        :type="buttonPrimary.indexOf(index) !== -1 ? 'primary' : 'default'"
        :class="{'u-ml20': index !== 0}"
      >{{item}}
      </el-button>
    </el-row>
  </Dialog>
</template>

<script>
import Dialog from "@/components/dialog";
import Alert from "@/components/alert";
import Tip from "@/components/tip";

export default {
  name: "DialogConfirm",
  components: {
    Dialog,
    Alert,
    Tip
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    showHeader: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ""
    },
    tip: {
      type: String,
      default: ""
    },
    content: {
      type: String,
      default: ""
    },
    icon: {
      type: String,
      default: "iconfont iconfont-8"
    },
    buttons: {
      type: Array,
      default() {
        return [];
      }
    },
    buttonPrimary: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  watch: {
    visible(v) {
      this.propVisible = v;
    }
  },
  data() {
    return {
      propVisible: this.visible
    };
  },
  methods: {
    onConfirm(index) {
      this.$emit("confirm", index);
    },
    onClose() {
      this.propVisible = false;
      this.$emit("update:visible", false);
    }
  }
};
</script>